<template>
  <div id="index">
    <div class="app-container" id="container">

      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;" class="big_title_style">基本信息</em>
          </div>

          <el-row :gutter="24">
            <el-col :span="20">
              <el-form-item label="储值名称" prop="rechargeName">
                <el-input v-model="form.rechargeName" placeholder="请输入储值名称" clearable maxlength="50" show-word-limit />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="13">
              <el-form-item label="有效日期" prop="timeValue">
                <el-date-picker v-model="timeValue" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
                </el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="7">

              <el-form-item label="显示顺序" prop="rechargeSort">
                <el-input-number v-model="form.rechargeSort" controls-position="right" :min="1"
                  :max="10"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="13">
              <el-form-item label="储值金额" prop="rechargeMoney">
                <el-input-number  :min="0.01" :precision="2" maxlength="9" placeholder="请输入储值金额"
                  :controls="false" v-model="form.rechargeMoney"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="兑换积分" prop="score">
                <el-input-number v-model="form.score"  :min="0" ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="14">
            <el-form-item label="兑换VIP"
              prop="memberLevel">
              <el-select v-model="form.memberLevel"
                placeholder="请选择VIP"
                clearable
                size="small">
                <el-option v-for="dict in memberLevels"
                  :key="dict.levelId"
                  :label="dict.levelName"
                  :value="dict.levelId" />
              </el-select>
            </el-form-item>
            </el-col>
          </el-row>



          <div>
            <el-form-item label="储值Icon" prop="itemDescImage">
              <imageArraySize :imageStr.sync="form.rechargeIcon" :key="form.rechargeIcon" ref="childs"
                :msg="'图片要求：宽高等于800px，大小5M内。'" :limit="1" :size="5 * 1024 * 1024"></imageArraySize>
            </el-form-item>

            <el-row :gutter="24">
              <el-col :span="20">
                <el-form-item label="储值描述" prop="rechargeDesc">
                  <el-input type="textarea" :rows="2" v-model="form.rechargeDesc" placeholder="请输入储值描述" clearable
                    maxlength="200" show-word-limit />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

      </el-form>
      <div class="dw">
        <el-button @click="colsePro" style="margin-top: 10px;margin-left: 40%;">返回</el-button>
        <el-button type="primary" @click="submitForm" style="margin-top: 10px;">保存</el-button>
      </div>

      <commodityStore v-if="storeOpen" @toCloseBox="toCloseBox" @multipleSelection="multipleSelection" :flag="storeOpen"
        :source="false" ref="selTable" :serviceTypes=form.serviceTypes></commodityStore>

    </div>
  </div>
</template>

<script>
import imageArraySize from "@/components/ImageUpload/imageArraySize";

import selected from "@/components/Activity/SelectedStore";
import commodityStore from "@/components/Activity/commodityStore";
import commoditytab from "@/components/Activity/commodityTab";
import SelectedPro from "@/components/radio/SelectedPro";
import selectedA from "@/components/radio/SelectedItem";
import commodityItem from "@/components/radio/commodityItem";
import selectedCoupon from "@/components/radio/SelectedCoupon";
import commodityCoupon from "@/components/radio/commodityCoupon";
import SelectedCard from "@/components/radio/SelectedCard";
import commodityCard from "@/components/radio/commodityCard";
import commodityPro from "@/components/radio/commodityPro";
import { onInput } from "@/utils/util";
import { memberLevelList} from "@/api/customer/level";

import {
  listBrand,
  getBrand,
  delBrand,
  addBrand,
  updateBrand,
  updateBrandStatus,
  updateBrandStatusA,
  addRight,
  updateRight,
} from "@/api/service/recharge";

export default {
  components: {
    imageArraySize, selected, commodityStore, commoditytab,
    SelectedPro,
    selectedA,
    commodityItem,
    selectedCoupon,
    commodityCoupon,
    commodityCard,
    SelectedCard,
    commodityPro,
  },
  data () {
    return {
      form: {
        checkList: [],
        isCommon: "1",
        firstDouble: "0",
        rightTypeList: [],
      },
      rules: {
        rechargeName: [
          {
            required: true,
            message: "储值名称不能为空",
            trigger: "blur",
          },

        ],
        // rightTypeList: [
        //     {
        //         required: true,
        //         message: "储值权益不能为空",
        //         trigger: "change",
        //     },
        // ],
      },
      optionsA: [
        {
          value: 1,
          label: "一月",
        },
        {
          value: 2,
          label: "二月",
        },
        {
          value: 3,
          label: "三月",
        },
        {
          value: 4,
          label: "四月",
        },
        {
          value: 5,
          label: "五月",
        },
        {
          value: 6,
          label: "六月",
        },
        {
          value: 7,
          label: "七月",
        },
        {
          value: 8,
          label: "八月",
        },
        {
          value: 9,
          label: "九月",
        },
        {
          value: 10,
          label: "十月",
        },
        {
          value: 11,
          label: "十一月",
        },
        {
          value: 12,
          label: "十二月",
        },
      ],
      options: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],
      selectedDataCopy: [{
        rechargeMoney: 1,
        goldCoin: 0,
        silverCoin: 0,
        score: 0,
      }],
      storeOpen: false,
      selectedDataStore: [],
      itemOpen: false,
      selectedDataItem: {},
      couponOpen: false,
      selectedDataCoupon: {},
      cardOpen: false,
      selectedDataCard: {},
      productOpen: false,
      selectedDataProduct: {},
      timeValue: [],
      memberLevels:[],
      refreshSelect: ''
    };
  },
  watch: {
    timeValue (obj) {
      if (obj == null) {
        this.form.startTime = null
        this.form.endTime = null
      }
    }


  },
  created () {
    this.getMemberLevelList();
    const rechargeId = this.$route.params && this.$route.params.rechargeId;
    if (rechargeId) {
      getBrand(rechargeId).then(response => {
        this.form = response.data;
        this.selectedDataStore = this.form.releaseList || []
        this.$set(this.form, 'checkList', [])
        if (this.form.isCommon == '0') {
          this.form.checkList.push('isCommon');
        }
        if (this.form.firstDouble == '1') {
          this.form.checkList.push('firstDouble');
        }

        if (this.form.isRecommend == '1') {
          this.form.checkList.push('isRecommend');
        }

        this.form.rechargeMoney = this.form.rechargeMoneyFmt;

        this.timeValue = [];
        this.timeValue.push(this.form.startTime || "");
        this.timeValue.push(this.form.endTime || "");


      });
    } else {

    }

  },
  methods: {
    onInput,
    toRefreshSelect () {
      this.refreshSelect = new Date().getTime()
    },
    rightTypeListChange (value) {
      // if (!this.form.rightTypeListChange) {
      //   return false;
      // }
      return this.form.rightTypeList.indexOf(value) > -1 ? true : false
    },
    choiceCheckboxItem (value) {
      if (!value) {
        this.selectedDataItem = []
      }
    },
    choiceCheckboxCoupon (value) {
      if (!value) {
        this.selectedDataCoupon = []
      }
    },
    choiceCheckboxCard (value) {
      if (!value) {
        this.selectedDataCard = []
      }
    },
    choiceCheckboxProduct (value) {
      if (!value) {
        this.selectedDataProduct = []
      }
    },
    submitForm () {

      this.$refs.childs.selectImgs();

      this.form.rechargeMoneyBig = this.form.rechargeMoney;


        this.form.isCommon = '1'
        this.form.firstDouble = '0'
        this.form.isRecommend = '0'

      if (this.timeValue && this.timeValue.length > 0) {
        if (this.timeValue[0] != "" && this.timeValue[0]) {
          this.form.startTime = this.formateDate(this.timeValue[0])

        }
        if (this.timeValue[1] != "" && this.timeValue[1]) {
          this.form.endTime = this.formateDate(this.timeValue[1])

        }
      } else {
        this.form.startTime = ""
        this.form.endTime = ""
      }


      // console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addBrand(this.form).then((response) => {
            this.msgSuccess("操作成功");
            this.colsePro();
          });
        }
      });
    },
    colsePro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/order/service/recharge",
        query: {
          t: Date.now()
        }
      });
    },
    formateDate (shijianchuo) {

      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s);

    },

    add0 (m) { return m < 10 ? '0' + m : m },
    //服务项目
    selectCommodityItem () {
      this.$forceUpdate();
      this.itemOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedDataItem);
      });
    },
    tabRespon () {
      this.selectedDataItem = {};
    },
    toCloseBoxItem () {
      this.itemOpen = false;
    },
    multipleSelectionItem (data) {
      this.itemOpen = false;
      this.selectedDataItem = data;
      this.$nextTick(() => {
        this.$refs.childItem.getList();
      });
    },
    //优惠券
    selectCommodityCoupon () {
      this.$forceUpdate();
      this.couponOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableCoupon"].greet(this.selectedDataCoupon);
      });
    },
    tabResponCoupon () {
      this.selectedDataCoupon = {};
    },
    toCloseBoxCoupon () {
      this.couponOpen = false;
    },
    multipleSelectionCoupon (data) {
      this.couponOpen = false;
      this.selectedDataCoupon = data;
      this.$nextTick(() => {
        this.$refs.childCoupon.getList();
      });
    },
    //套餐卡
    selectCommodityCard () {
      this.$forceUpdate();
      this.cardOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableCard"].greet(this.selectedDataCard);
      });
    },
    tabResponCard () {
      this.selectedDataCard = {};
    },
    toCloseBoxCard () {
      this.cardOpen = false;
    },
    multipleSelectionCard (data) {
      this.cardOpen = false;
      this.selectedDataCard = data;
      this.$nextTick(() => {
        this.$refs.childCard.getList();
      });
    },
    //商品
    selectCommodityProduct () {
      this.$forceUpdate();
      this.productOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableProduct"].greet(this.selectedDataProduct);
      });
    },
    tabResponProduct () {
      this.selectedDataProduct = {};
    },
    toCloseBoxProduct () {
      this.productOpen = false;
    },
    multipleSelectionProduct (data) {
      this.productOpen = false;
      this.selectedDataProduct = data;
      this.$nextTick(() => {
        this.$refs.childProduct.getList();
      });
    },

    selectCommodity () {
      this.$forceUpdate()
      this.storeOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedDataStore);
      });
    },
    multipleSelection (data) {
      this.storeOpen = false
      this.selectedDataStore = data;
      this.$nextTick(() => {
        this.$refs.childStore.getList();
      });
    },
    toCloseBox () {
      this.storeOpen = false;
    },
    existValue (type) {
      let index = 0;
      if (this.form.checkList && this.form.checkList.length > 0) {
        this.form.checkList.forEach(elemet => {
          if (elemet == type) {
            index++;
          }
        })
      }

      return index;
    },

    choiceCheckboxStroe (value) {
      if (!value) {
        this.selectedDataStore = []
      }
    },
    choicefirstDouble (value) {
      if (!value) {
        this.form.firstDoubleMonth = null;
      }
    },
    handleCheckbox () {
      if (this.form.checkList.includes('isCommon')) {
        this.form.isCommon = '0'
      } else {
        this.form.isCommon = '1'
      }
      if (this.form.checkList.includes('firstDouble')) {
        this.form.firstDouble = '1'
      } else {
        this.form.firstDouble = '0'
      }
      if (this.form.checkList.includes('isRecommend')) {
        this.form.isRecommend = '1'
      } else {
        this.form.isRecommend = '0'
      }

      if (this.form.isCommon == '0') {
        if (this.selectedDataStore.length == 0) {
          this.$message.error("请选择一个门店");
          return 1;
        }
      }

      if (this.form.firstDouble == '1') {
        if (!this.form.firstDoubleMonth) {
          this.$message.error("请选择重置月份");
          return 1;
        }
      }

      //return 0;
    },
    getSTime (val) {
      //手动赋值，使其通过校验

      const d = new Date(val[0]);
      const resDate =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      const resTime =
        this.p(d.getHours()) +
        ":" +
        this.p(d.getMinutes()) +
        ":" +
        this.p(d.getSeconds());
      this.form.startTime = resDate + " " + resTime;
      const c = new Date(val[1]);
      const resDatec =
        c.getFullYear() +
        "-" +
        this.p(c.getMonth() + 1) +
        "-" +
        this.p(c.getDate());
      const resTimec =
        this.p(c.getHours()) +
        ":" +
        this.p(c.getMinutes()) +
        ":" +
        this.p(c.getSeconds());
      this.form.endTime = resDatec + " " + resTimec;
    },
    /** 查询客户等级列表 */
    getMemberLevelList() {
      memberLevelList(this.queryParams).then((response) => {
        this.memberLevels = response.rows;
      });
    },
  }
}
</script>

<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}
</style>
